import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/widgets/app/app_video_play.dart';
import 'package:bxultimate/widgets/mk_load_image.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class ArticleDetailPage extends StatefulWidget {
  const ArticleDetailPage({Key? key}) : super(key: key);

  @override
  State<ArticleDetailPage> createState() => _ArticleDetailPageState();
}

class _ArticleDetailPageState extends State<ArticleDetailPage> {
  final controller = Get.find<ArticleDetailController>();
  final state = Get.find<ArticleDetailController>().state;

  _buildImage() {
    return state.imgList.length > 0
        ? state.imgList.length > 1
            ? Container(
                height: 200,
                child: Swiper(
                  autoplay: true,
                  itemCount: state.imgList.length,
                  loop: true,
                  pagination: const SwiperPagination(
                      alignment: Alignment.bottomCenter,
                      builder: TDSwiperPagination.dotsBar),
                  itemBuilder: (BuildContext context, int index) {
                    return TDImage(
                      imgUrl: state.imgList[index],
                    );
                  },
                ),
              )
            : Column(
                children: [
                  ClipRRect(
                    child: MkLoadImage(state.article.imgUrl),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  Gaps.vGap12
                ],
              )
        : SizedBox();
  }

  _buildVideo() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Obx(() => state.videoUrl == ''
            ? SizedBox()
            : AppVideoPlay(url: state.videoUrl, title: state.article.title)),
        Expanded(
          child: Padding(
            padding: EdgeInsets.all(AppTheme.iDefaultPadding),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '${state.article.title}',
                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                ),
                Gaps.vGap12,
                HtmlWidget(state.article.content)
              ],
            ),
          ),
        )
      ],
    );
  }

  Widget _buildArticle() {
    return Obx(() => SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.all(AppTheme.iDefaultPadding),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '${state.article.title}',
                  style: TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
                ),
                Gaps.vGap12,
                _buildImage(),
                HtmlWidget(state.article.content)
              ],
            ),
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return MkPage(
      child: Obx(()=>Scaffold(
          backgroundColor: Colors.transparent,
          appBar: TDNavBar(
            backgroundColor: Colors.transparent,
            title: state.article.title,
          ),
          body: Obx(
                  () => state.videoUrl == '' ? _buildArticle() : _buildVideo()))),
    );
  }

  @override
  void dispose() {
    Get.delete<ArticleDetailController>();
    super.dispose();
  }
}
